import React, { useSyncExternalStore } from 'react'

import { todosStore } from './21-todos'

const App = () => {

    // useSyncExternalStore 该 hooks 可以获取到外部状态的所有数据内容.允许一个组件订阅一个外部 store
    const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot)
    
    console.log(todos);
    return (
      <div >
        App 
        <button onClick={()=>{
          todosStore.addTodo()
        }}>添加 todo</button>
        <hr />
        <ul>
          {todos.map(item => (<li key={item.id}>{item.text}</li>))}
        </ul>
      </div>
  )
}

export default App